<template>
  <div>
    <component :area="area" :center="ponit" :shapeType="shapeType" 
    @update:fence="handleFence"  :is="currentViewComponent" />
  </div>
</template>

<script>
import { wgs84togcj02, gcj02towgs84, out_of_china } from 'gps-convert'
import GEdit from '@/components/map/fence/google/EditFence'
import TEdit from '@/components/map/fence/tencent/EditFence'

function convertCoordinates(format) {
  if(format){
    var parts = format.slice(1, -1).split(",");
    var latitude = parseFloat(parts[0]);
    var longitude = parseFloat(parts[1]);
    return {
        latitude: latitude,
        longitude: longitude
    };
  }
  return null;
}

function convertCirCle(format) {
    var parts = format.slice(1, -1).split(",");
    var latitude = parseFloat(parts[0]);
    var longitude = parseFloat(parts[1]);
    var radius = parseFloat(parts[2]);
    return {
        latitude: latitude,
        longitude: longitude,
        radius: radius
    };
}

function convertPolygon(format) {
  var points = format.slice(1, -1).split(");(");
  return points.map((item) => {
      let parts = item.split(",");
      let latitude = parseFloat(parts[0]);
      let longitude = parseFloat(parts[1]);
      return {
          latitude: latitude,
          longitude: longitude
      };
  });
}

export default {
  name: 'Edit',
  components: {
    GEdit,
    TEdit
  },
  props: {
    value: {
      type: String,
    },
    shapeType: {
      type: String,
      default: "circle",
    },
    center: {
      type: String,
    },
  },
  data() {
    return {
      // 假设这里根据浏览器语言来设置初始值
      language: navigator.language || navigator.userLanguage, // 获取浏览器语言
      currentView: 'GEdit' // 默认组件，可以根据实际情况修改
    }
  },
  computed: {
    // 根据当前语言选择组件
    currentViewComponent() {
      // 这里只是一个简单的示例，你可能需要根据实际情况调整语言判断逻辑
      if (this.language.startsWith('zh')) {
        // 如果是中文，则使用 TEdit
        this.currentView = 'TEdit';
      } else {
        // 其他情况使用 GEdit
        this.currentView = 'GEdit';
      }
      console.log('currentView:', this.currentView);
      return this.currentView;
    },
    /**
     * 地图围栏图像
     */
    area() {
      if (this.shapeType === 'circle' && this.value) {
        const { latitude, longitude, radius } = convertCirCle(this.value);
        let x = latitude;
        let y = longitude;
        if(out_of_china([longitude, latitude])){ //国内wgs84坐标转换为gcj02坐标
          const point = wgs84togcj02([longitude, latitude]);
          x = point[1].toFixed(6);
          y = point[0].toFixed(6);
        }
        return {
          latitude: x,
          longitude: y,
          radius: radius
        };
      }else if (this.shapeType === 'polygon' && this.value) {
        let paths = convertPolygon(this.value);
        if(out_of_china([paths[0].longitude, paths[0].latitude])){ //国内wgs84坐标转换为gcj02坐标
          paths = paths.map((item) => {
            const { latitude, longitude } = item;
            const point = wgs84togcj02([longitude, latitude]);
            x = point[1].toFixed(6);
            y = point[0].toFixed(6);
            return {
              latitude: x,
              longitude: y
            }
          });
        }
        return paths;
      }
      return {};
    },
    /**
     * 地图中心点坐标
     */
    ponit(){
      if(this.center){
        const center = convertCoordinates(this.center);
        if(out_of_china([center.longitude, center.latitude])){ //国内wgs84坐标转换为gcj02坐标
            const point = wgs84togcj02([center.longitude, center.latitude]);
            x = point[1].toFixed(6);
            y = point[0].toFixed(6);
            return {"latitude": x, "longitude": y};
        }else{
          return center
        }
      }
      return {};
    }
  },
  // 如果需要在组件创建后执行某些操作，可以使用 mounted 钩子函数
  mounted() {
  },
  methods: {
    handleFence(fenceObj){
      if(!fenceObj){
        this.$emit('input', "");
        this.$emit('update:center', "");
      }else{
        if (this.shapeType === 'circle') {
          //获取矩形顶点坐标
          let x = fenceObj.lat.toFixed(6);
          let y = fenceObj.lng.toFixed(6);
          if(out_of_china([y, x])){ //国内gcj02坐标转换为wgs84坐标
            const point = gcj02towgs84([y, x]);
            x = point[1].toFixed(6);
            y = point[0].toFixed(6);
          }
          const r = fenceObj.radius.toFixed(6);
          this.$emit('input', `(${x},${y},${r})`);
          this.$emit('update:center', `(${x},${y})`);
        }
        if (this.shapeType === 'polygon') {
          //获取多边形顶点坐标
          const x = fenceObj.lat.toFixed(6);
          const y = fenceObj.lng.toFixed(6);
          if(out_of_china([y, x])){ //国内gcj02坐标转换为wgs84坐标
            const point = gcj02towgs84([y, x]);
            x = point[1].toFixed(6);
            y = point[0].toFixed(6);
          }
          const center = `(${x},${y})`;
          let path;
          if(out_of_china([y, x])){ //国内gcj02坐标转换为wgs84坐标
            path = fenceObj.paths.map((item) => {
              const lat = item.lat.toFixed(6);
              const lng = item.lng.toFixed(6);
              const point = gcj02towgs84([lng, lat]);
              x = point[1].toFixed(6);
              y = point[0].toFixed(6);
              return `(${x},${y})`;
            }).join(";");
          }else{
            path = fenceObj.paths.map((item) => {
              const lat = item.lat.toFixed(6);
              const lng = item.lng.toFixed(6);
              return `(${lat},${lng})`;
            }).join(";");
          }
          this.$emit('input', path);
          this.$emit('update:center', center);
        }
      }
    },
  }
}
</script>

<style scoped>

</style>